<template>
  <view class="address-container">
    <nav-bar></nav-bar>
    <u-empty
      mode="data"
      v-if="addressList.length === 0"
      text="还没有收货地址"
    ></u-empty>
    <view class="address-list" v-else>
      <view class="item" v-for="item in addressList" :key="item.objectId">
        <view class="top">
          <view
            :class="[
              'iconfont',
              'check-btn',
              'icon-huiyishiqueren_huabanfuben',
              item.isCheck ? 'selected' : '',
            ]"
            @click="SetDefault({ id: item.objectId, isDefaultBtn: false })"
          ></view>
          <view class="info" @click="toAddressDetail(1, item.objectId)">
            <view class="userInfo">
              <text class="name">{{ item.name }}</text>
              <text class="phone">{{ item.phone }}</text>
            </view>
            <view class="addressInfo">
              <text class="city">{{ item.city }}</text>
              <text class="region">{{ item.region }}</text>
              <text class="detail">{{ item.detailAddress }}</text>
            </view>
          </view>
          <view
            class="iconfont more icon-arrow-right"
            @click="toAddressDetail(1, item.objectId)"
          ></view>
        </view>
        <view :class="['default', !item.isDefault ? 'isDefault' : '']">默</view>
        <view class="footer">
          <text
            class="set-default"
            v-if="!item.isDefault"
            @click="SetDefault({ id: item.objectId, isDefaultBtn: true })"
          >
            设为默认
          </text>
          <text class="set-default" v-else>已为默认</text>
          <text class="del" @click="hanlderDel(item.objectId)">
            删除地址
            <text class="iconfont icon-shanchu"></text>
          </text>
        </view>
      </view>
    </view>
    <view
      class="add-btn iconfont icon-jiahao"
      @click="toAddressDetail(0)"
    ></view>
    <!-- 删除地址模态框 -->
    <u-modal
      :show="isShowModel"
      zoom
      width="430rpx"
      showCancelButton
      @cancel="isShowModel = false"
      @confirm="delAddress"
      asyncClose
      content="确定删除该收货地址吗？"
    ></u-modal>
  </view>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      isShowModel: false,
      selectAddressId: '', // 选中的地址id
    }
  },
  computed: {
    ...mapState('address', ['addressList']),
  },
  methods: {
    ...mapActions('address', ['GetAddressList', 'DelAddress', 'SetDefault']),
    // 跳转地址详情页（新增页）
    // type为1表示详情，0表示新增
    toAddressDetail(type, id) {
      uni.navigateTo({
        url: `/pages/address/add-address?id=${id}&type=${type}`,
      })
    },
    // 点击删除按钮的回调
    hanlderDel(id) {
      this.isShowModel = true
      this.selectAddressId = id
    },
    // 确认删除的回调
    async delAddress() {
      try {
        await this.DelAddress(this.selectAddressId)
        this.isShowModel = false
        uni.showToast({
          title: '删除收货地址成功',
          duration: 2000,
          icon: 'none',
        })
        this.$store.dispatch('address/GetAddressList')
      } catch (e) {
        console.log(e)
      }
    },
  },
  onShow() {
    this.GetAddressList()
  },
}
</script>

<style lang="scss">
.address-container {
  .u-empty {
    margin-top: 40rpx !important;
  }
  .add-btn {
    margin: 100rpx auto 0;
    width: 100rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    background-color: $lxins-color-yellow;
    border-radius: 50%;
    color: #fff;
    font-size: $lxins-fs-22;
  }
  .item {
    position: relative;
    margin: 16rpx;
    padding: 16rpx 20rpx;
    border: 1px solid #eee;
    overflow: hidden;
    margin-top: 12rpx;
    .top {
      display: flex;
      .check-btn,
      .more {
        margin: 20rpx;
        font-size: $lxins-fs-18;
        color: #999;
      }
      .check-btn {
        &.selected {
          color: $lxins-color-yellow;
        }
      }
      .info {
        width: 520rpx;
        .userInfo {
          margin-bottom: 8rpx;
          .name {
            margin-right: 12rpx;
          }
        }
        .addressInfo {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
    .footer {
      display: flex;
      text {
        margin-top: 20rpx;
        flex: 1;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: $lxins-fs-14;
      }
      .del {
        position: relative;
      }
      .del::before {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 2px;
        height: 32rpx;
        background-color: #ddd;
      }
    }
    .default {
      position: absolute;
      top: -36rpx;
      right: -36rpx;
      padding: 40rpx 20rpx;
      padding-bottom: 0;
      background-color: $lxins-color-yellow;
      transform: rotate(45deg);
      font-size: $lxins-fs-12;
      &.isDefault {
        opacity: 0;
      }
    }
  }
}
</style>
